<template>
  <a-modal
    title="操作"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-row>
      <a-col :span="24" class="colCsss">
        <a-card title="基本信息" :bordered=false   class="ant-advanced-search-form">
          <a-form
            :form="form"
            class="aFform"
          >
            <a-form-item  label="代理商" class="atFormItem">
              <a-select :disabled="display"
                v-decorator="[ 'agentId', {rules: [{ required: true, message: '请选择服务商' }],initialValue: defaultCompany}]"
                placeholder="请选择代理商">
                <a-select-option :value="company.id" v-for="company in companyList" :key="company.id">
                  {{company.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              label="商户名称"
              class="atFormItem"
            >
              <a-input placeholder="商户名称"
                       v-decorator="[ 'name', {rules: [{ required: true, message: '请输入。。。' }]} ]"/>
            </a-form-item>
            <a-form-item
              label="获得一积分需消费(元)"
              class="atFormItem"
            >
              <a-input placeholder="获得一积分需消费"
                       v-decorator="[ 'monetary', {rules: [{ required: false, message: '请输入。。。' }] }]"/>
            </a-form-item>
            <a-form-item
              label="退款密码"
              class="atFormItem"
              v-if="hiddenPassword"
            >
              <a-input placeholder="退款密码"
                       v-decorator="[ 'refundSecret',  { initialValue:123456,rules: [{ required: false, message: '请输入。。。' }] }]"/>
            </a-form-item>
            <a-form-item
              label="会员信息推送"
              class="atFormItem"
            >
              <a-radio-group v-decorator="[ 'isMember', {rules: [{ required: true, message: '请选择' }],initialValue:0}]">
                <a-radio :value="0">关闭</a-radio>
                <a-radio :value="1">开启</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              class="atFormItem"
              label="商户logo"
            >
              <a-upload
                :action="this.$baseURL+'/common/upload/uploadImg'"
                listType="picture-card"
                :fileList="fileList"
                @preview="uploadPreview"
                @change="uploadChange"
                :disabled="flag"
                :beforeUpload="beforeUpload"
              >
                <div v-if="fileList.length < 1" >
                  <a-icon type="plus" />
                  <div class="ant-upload-text"  >商户logo</div>
                </div>
              </a-upload>
              <a-modal  :visible="previewVisible" :footer="null" @cancel="uploadCancel" >
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>

      <a-col :span="24"  class="colCsss">
        <a-card title="支付信息" :bordered=false  class="ant-advanced-search-form">
          <a-form
            :form="form"
            class="aFform"
          >
            <a-form-item
              label="支付宝TOKEN"
              class="atFormItem"
            >
              <a-input placeholder="支付宝TOKEN"
                       v-decorator="[ 'aliAuthToken', {rules: [{ required: false, message: '请输入。。。' }] }]"/>
            </a-form-item>
            <a-form-item
              label="微信子商户号"
              class="atFormItem"
            >
              <a-input placeholder="微信商户号" v-decorator="[ 'subMchId', {rules: [{ required: false, message: '请输入。。。' }] }]"/>
            </a-form-item>
            <a-form-item
              label="支付方式"
              class="atFormItem"
              style="width: 100%"
            >
              <a-radio-group v-decorator="[ 'payWay', {rules: [{ required: true, message: '请选择' }],initialValue:0}]">
                <a-radio :value="0">微信</a-radio>
                <a-radio :value="1">第三方</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              label="第三方账号"
              class="atFormItem"
            >
              <a-input placeholder="第三方账号" v-decorator="[ 'payAccount', {rules: [{ required: false, message: '请输入。。。' }] }]"/>
            </a-form-item>
            <a-form-item
              label="第三方密钥"
              class="atFormItem"
            >
              <a-input placeholder="第三方密钥" v-decorator="[ 'payKey', {rules: [{ required: false, message: '请输入。。。' }] }]"/>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
      <a-col :span="24"  class="colCsss">
        <a-card title="公众号信息" :bordered=false   class="ant-advanced-search-form">
          <a-form
            :form="form"
            class="aFform"

          >
            <a-form-item
              label="公众号APPID"
              class="atFormItem" >
              <a-input placeholder="公众号APPID"
                       v-decorator="[ 'subAppId', {rules: [{ required: false, message: '请输入。。。' }] }]"/>
            </a-form-item>
            <a-form-item
              class="atFormItem"
              label="公众号原始ID">
              <a-input placeholder="公众号原始ID" v-decorator="[ 'subAppAccount', {rules: [{ required: false, message: '请输入。。。' }] }]"/>
            </a-form-item>
            <a-form-item
              class="atFormItem"
              label="公众号SECRET"
            >
              <a-input placeholder="公众号SECRET" v-decorator="[ 'appSecret', {rules: [{ required: false, message: '请输入。。。' }] }]"/>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
      <a-col :span="24" class="colCsss">
        <a-card title="微信小程序" :bordered=false   class="ant-advanced-search-form">
          <a-form
            :form="form"
            class="aFform"
          >

            <a-form-item
              class="atFormItem"
              label="小程序Appid"
            >
              <a-input
                placeholder="小程序Appid"
                v-decorator="[ 'miniAppid', {rules: [{ required: false, message: '请输入。。。' }]}]"
              ></a-input>
            </a-form-item>
            <a-form-item
              class="atFormItem"
              label="小程序Secret"
            >
              <a-input
                placeholder="小程序Secret"
                v-decorator="[ 'miniSecret', {rules: [{ required: false, message: '请输入。。。' }]}]"
              ></a-input>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>



  </a-modal>


</template>

<script>
  import { save, deletePic } from '@/api/merchantService/merchant'
  import { selectAll } from '@/api/agentService/agent'
  import pick from 'lodash.pick'

  export default {
    //--############  data() ###############-->
    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        visible: false,
        confirmLoading: false,
        mdl: {},
        form: this.$form.createForm(this),
        isDisabled: false,
        display:false,
        previewVisible: false,
        fileList: [],
        itemList: [],
        itemImage: [],
        newFileList: [],
        newItemList: [],
        flag: false,
        previewImage: '',
        defaultCompany: '',
        companyList: [],
        hiddenPassword:false

      }
    },
    //--############  data() ###############-->

    created() {
      selectAll().then(res => {
        this.companyList = res.result
        this.defaultCompany = this.companyList[0].id
        this.company = {
          'companyId': this.defaultCompany,
          'sourceType': 'bigWheel'
        }

      })
    },

    //--############  methods() ###############-->
    methods: {
      uploadPreview(file) {
        this.previewImage = file.url || file.thumbUrl
        this.previewVisible = true
      },
      uploadItemView(file) {
        this.itemImage = file.url || file.thumbUrl
        this.previewVisible = true
      },
      demo(e) {
        console.log(this.$refs.drawTotalFee)
        console.log()
      },
      uploadChange(info) { //图片logo
        this.fileList = info.fileList
        if (info.file.status === 'done') {
          this.fileList.pop()
          this.fileList.push(info.file)
          this.$message.success(`${info.file.name} 上传成功`)
          this.newFileList = info.file.response

        } else if (info.file.status === 'error') {
          this.$message.success(`${info.file.name} 上传失败`)
        } else if (info.file.status === 'removed') {
          deletePic(info.file.response.name).then(res => {
            if (res.code == 200) {
              this.$message.success(`删除成功`)
            } else {
              this.$message.success(`删除失败`)
            }
          })
        }
      },
      uploadCancel() { //图片logo
        this.previewVisible = false
      },
      beforeUpload(file) { //上传图片之前的钩子
        const isJPEG = file.type === 'image/jpeg'
        const isJPG = file.type === 'image/jpg'
        const isPNG = file.type === 'image/png'
        if (!isJPG && !isJPEG && !isPNG) {
          this.$message.error('只支持文件格式jpg,png')
        }
        return file.type
      },


      add() {
        this.isDisabled = false
        this.visible = true
        this.hiddenPassword=false
      },
      edit(record) {
        this.display=true
        this.hiddenPassword=true
        console.log('0000',record)
        let logoUrl = Object.assign({}, { url: record.logoUrl })
        let advertisementPicUrl = Object.assign({}, { url: record.advertisementPicUrl })
        this.itemList.push({ 'uid': '23678', url: record.advertisementPicUrl,name:'234' })
        this.fileList.push({ 'uid': '12345', url: record.logoUrl,name:'123' })
        this.isDisabled = true
        this.mdl = Object.assign({}, record)
        if(this.mdl.payWay==null){
          this.mdl.payWay=0
        }
        this.mdl.monetary = record.monetary / 100
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.mdl, 'agentId','name','monetary','isMember','aliAuthToken','subMchId','payWay','payAccount','payKey','subAppId','subAppAccount','refundSecret','appSecret','miniAppid','miniSecret'))
        })
      },
      close() {
        this.$emit('close')
        this.visible = false
        this.form.resetFields()
        this.mdl = {}
        this.fileList = []
        this.itemList = []
      },
      handleOk() {
        const _this = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          // 验证表单没错误
          if (!err) {
            values.id = this.mdl.id
            _this.confirmLoading = true
            let logoUrl = this.newFileList.url
            let advertisementPicUrl = this.newItemList.url
            values.logoUrl = logoUrl
            values.agentId = parseInt(values.agentId)
            values.advertisementPicUrl = advertisementPicUrl

            values.monetary = values.monetary == null || values.monetary == undefined || values.monetary == NaN ? null : values.monetary * 100
            save(values).then((res) => {
              if (res.code === 200) {
                _this.$message.success('保存成功')
                _this.$emit('ok')
                _this.close()
              }
              else {
                this.$notification.error({
                  message: '错误',
                  description: res.message,
                  duration: 4
                })
              }
            }).catch(() => {
              // Do something
            }).finally(() => {
              _this.confirmLoading = false
            })
          }
        })
      },
      handleCancel() {
        this.close()
      }
    }
    //--############  methods() ###############-->
  }
</script>

<style scoped>
  .aFform{

    display: flex;
    flex-wrap: wrap
  }
  #components-form-demo-vuex .language-bash {
    max-width: 400px;
    border-radius: 6px;
    margin-top: 24px;
  }
  .atFormItem{
    margin-right:38px;
    width:44%;

  }
  /*.ant-advanced-search-form {*/
  /*  display: flex;*/
  /*}*/
  .colCsss{
    margin-bottom: 20px;
    border: 1px solid #eee;
  }

  .ant-pro-footer-toolbar{
    position: fixed;
    bottom: 0;
    right: 0;
    height: 56px;
    line-height: 56px;
    box-shadow:0 -1px 2px rgba(0,0,0,.03);
    background: #fff;
    border-top: 1px solid #e8e8e8;
    padding: 0 24px;
    z-index: 9;
  }

</style>
